<template>
    <div class="echarts" id="piemain"  >
    <IEcharts  v-if="this.show"    :loading="loading"  :option="pie" @ready="onReady"  @click="onClick"></IEcharts>
  </div>
</template>

<script>
// import * as echarts from 'echarts';
import IEcharts from 'vue-echarts-v3/src/full';
import 'echarts/lib/component/title'; //引入标题组件
import 'echarts/lib/component/legend'; //引入图例组件
import 'echarts/lib/component/tooltip'; //引入提示框组件
import 'echarts/lib/component/toolbox'; //引入工具箱组件
import 'echarts/lib/chart/pie'; //以饼图为例

// import ECharts from 'vue-echarts'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/polar'

import MusicAPI from '@/api/MusicAPI';
// Vue.prototype.$echarts = echarts;
export default {
name: "LikeAnalysis",
components: {
  IEcharts,
  // 'v-chart': ECharts,
  MusicAPI 
},


created(){
      // this.show = true   
    this.Analysis()
    },

    data: () => ({
      list:{},
      show :false,
      pie: {
        // title: {
        //   text: '喜好标签'
        // },
        tooltip: {},
        legend:{
          // type: 'plain',
          // orient: 'vertical',
          // left: 0,
          // top: 20,
          top: '85%',
          left: 'center'
        },

        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },

        series: [{
     
          type: 'pie',
          radius: '60%',
          data: [],
        }]
      }
    }),

    methods: {
      onReady(instance) {
        console.log(instance);
        // this.Analysis();
      },
      onClick(event, instance, echarts) {
        console.log(arguments);
      },

      Analysis(){
    var result = MusicAPI.Analysis2Like()
      // 获取响应结果 
      result.then((val)=>{
        if(val.success){
          this.show = true 
          this.pie.series[0].data = val.data
              //  console.log(this.pie.series.data)
        }else{
         this.show =false
          // console.log(val.errorMsg)
          // alert(val.errorMsg)
          this.$toast(val.errorMsg)
      
        }
            })
  },

  chartChange () {
    // var chartDom = document.getElementById('piemain');
    // var myChart = echarts.init(chartDom);
    // this.option && myChart.setOption(this.option);
    }


    },


  };
</script>
<style scoped>
  .echarts{
    width: 400px;
    height: 400px;
    margin: auto;
    text-align: center;
  }
</style>
